<template>
  <div class="questionsList">
    <div class="question-top" v-if="!isAnalyse">
      <span class="now-index">{{ currentIndex + 1 }}</span>
      <span class="total">/{{ questionsInfo.subjectList && questionsInfo.subjectList.length }}</span>
      <span class="time">耗时: {{timerDuration}}s</span>
    </div>
    <!-- 题目内容 -->
    <div class="a-list">
      <p class="question-title" v-if="currentItem.subject_type === '13'">听材料回答下列问题</p>
      <div class="media-box" v-if="currentItem.display_type === '1'" v-html="currentItem.subject_content"></div>
      <!-- 图片 -->
      <div class="media-box" v-else-if="currentItem.display_type === '2'">
        <img :src="currentItem.file_url" style="width:100%;height:100%">
      </div>
      <!-- 音频 -->
      <div class="media-box" v-else-if="currentItem.display_type === '3'">
        <audio class="audio" controls :src="currentItem.file_url"></audio>
      </div>
      <!-- 视频 -->
      <div class="media-box" v-else-if="currentItem.display_type === '4'">
        <video class="video" controls :src="currentItem.file_url">
        </video>
      </div>
      <!-- 10：单选题； -->
      <template v-if="currentItem.subject_type === '10'">
        <div class="select-list">
          <template v-if="isAnalyse">
            <!-- 解析 -->
            <div class="item cursor" v-for="(item, index) in currentItem.itemList" :key="index">
              <span :class="`chooseBtn cursor ${item.answer_code === questionsInfo.myAnswer ? 'activeChooseBtn' :''}`">{{item.answer_code}}</span>
              <span class="question-content">
                {{ item.resource_subject_item_tent }}
              </span>
            </div>
          </template>
          <template v-else>
            <div class="item cursor" @click="addResult(item.answer_code, item.subject_item_id)" v-for="(item, index) in currentItem.itemList" :key="index">
              <span :class="`chooseBtn cursor ${item.subject_item_id === currentResultItem.subject_item_id ? 'activeChooseBtn' :''}`">{{item.answer_code}}</span>
              <span class="question-content">
                {{ item.resource_subject_item_tent }}
              </span>
            </div>
          </template>
        </div>
      </template>
      <!-- 11：多选题； -->
      <!-- 12：判断题； -->
      <template v-if="currentItem.subject_type === '12'">
        <div class="select-list">
          <template v-if="isAnalyse">
            <!-- 解析 -->
            <div class="item cursor" v-for="(item, index) in currentItem.itemList" :key="index">
              <span :class="`chooseBtn cursor ${item.resource_subject_item_tent === questionsInfo.myAnswer ? 'activeChooseBtn' :''}`">{{item.resource_subject_item_tent}}</span>
              <span class="question-content">
                {{ item.resource_subject_item_tent }}
              </span>
            </div>
          </template>
          <template v-else>
            <div class="item cursor" @click="addResult(item.resource_subject_item_tent, item.subject_item_id)" v-for="(item, index) in currentItem.itemList" :key="index">
              <span :class="`chooseBtn cursor ${item.subject_item_id === currentResultItem.subject_item_id ? 'activeChooseBtn' :''}`">{{item.resource_subject_item_tent}}</span>
              <span class="question-content">
                {{ item.resource_subject_item_tent }}
              </span>
            </div>
          </template>
        </div>
      </template>
      <!-- 13：填空题； -->
      <template v-if="currentItem.subject_type === '13'">
        <p class="question-title" v-html="currentItem.subject_content"></p>
        <ul>
          <li v-for="(item, index) in currentResultItem.stu_answer" :key="index">
            请填补空白处
            <el-input class="answer-input" v-model="currentResultItem.stu_answer[index]" />
            <el-button @click="addResult(currentResultItem.stu_answer[index], index, 13)">确定</el-button>
          </li>
        </ul>
      </template>
      <!-- 14：翻译题； -->
      <!-- 15：文字排序题； -->
      <!-- 16：连线题； -->
      <!-- 17：写作题； -->
      <!-- 18：口语题 -->
    </div>
    <!-- 底部按钮 -->
    <div class="controller" v-if="!isAnalyse">
      <el-button :disabled="currentIndex === 0" @click="jumpPage(-1)">上一题</el-button>
      <el-button :disabled="questionsInfo.subjectList && currentIndex === questionsInfo.subjectList.length -1" @click="jumpPage(1)">下一题</el-button>
      <el-button type="primary" @click="cardVisible = true">提交</el-button>
    </div>

    <el-dialog title="答题卡" :visible.sync="cardVisible" class="card-box">
      <div class="card-title">Lesson 1 Making An Orientation</div>
      <div class="card-desc">类型：单元测验</div>
      <div class="card-list">
        <div :class="`card-li ${cardActive(item)}`" v-for="item in resultArr" :key="item.subject_id">
          {{item.sort_index}}
        </div>
      </div>
      <el-button type="primary" @click="confirm">提交</el-button>
    </el-dialog>

  </div>
</template>

<script>
import { submitTest } from '@/api/student/lesson/study'
import { taskSubmit } from '@/api/student/lesson/task'
export default {
  props: {
    questionsInfo: {
      type: Object,
      default: () => {}
    },
    testDuration: {
      type: String,
      default: ''
    },
    isAnalyse: {
      // 是否为解析
      type: Boolean,
      default: false
    },
    type: {
      // 类型 1-学习测验 2-任务
      type: Number,
      default: 1
    }
  },
  computed: {
    currentItem () {
      if (this.isAnalyse) {
        // 解析
        return this.questionsInfo.subjectMap
      } else if (this.questionsInfo.subjectList) {
        return this.questionsInfo.subjectList[this.currentIndex]
      } else {
        return {}
      }
    },
    currentResultItem () {
      // console.log(this.resultArr[this.currentIndex])
      return this.resultArr[this.currentIndex]
    }
  },
  data () {
    return {
      // 当前题目的索引
      currentIndex: 0,
      timer: null,
      timerDuration: 0,
      cardVisible: false,
      resultArr: [] // 结果数组
    }
  },
  components: {},
  watch: {
    testDuration () {
      this.timerDuration = this.testDuration
      this.runTimer()
    },
    questionsInfo: {
      deep: true,
      handler () {
        if (!this.isAnalyse) {
          this.resultArr = this.questionsInfo.subjectList.map(item => {
            let resultItem = {
              subject_id: item.subject_id, // 题目id
              subject_type: item.subject_type, // 题目类型
              stu_answer: '', // 学生作答
              score: 0, // 分数
              right_flag: 0,
              sort_index: item.sort_index // 题目对应的排序号
            }
            if (Number(item.subject_type) < 17) {
              resultItem['right_answer'] = item.right_answer // 正确答案
              resultItem['subject_item_id'] = 0 // 正确答案 id
            }
            if (Number(item.subject_type) === 13) {
              let stuAnswerLength = item.subject_content.split('_______________').length - 1
              resultItem.stu_answer = []
              for (let i = 0; i < stuAnswerLength; i++) {
                resultItem.stu_answer.push('')
              }
            }
            return resultItem
          })
        }
      }
    }
  },
  mounted () {
    this.timerDuration = this.testDuration
    this.runTimer()
  },
  methods: {
    runTimer () {
      clearInterval(this.timer)
      this.timer = null
      this.timer = setInterval(() => {
        this.timerDuration++
      }, 1000)
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.timer)
        this.timer = null
      })
    },
    // 点击选项添加结果
    addResult (answerCode, subjectItemId, type) {
      if (type === 13) {
        if (answerCode === this.currentResultItem.right_answer[0]) {
          this.resultArr[this.currentIndex].score = 100
          this.resultArr[this.currentIndex].right_flag = 1
        }
      } else {
        this.resultArr[this.currentIndex].stu_answer = answerCode
        this.resultArr[this.currentIndex].subject_item_id = subjectItemId
        if (answerCode === this.currentResultItem.right_answer) {
          this.resultArr[this.currentIndex].score = 100
          this.resultArr[this.currentIndex].right_flag = 1
        }
      }
    },
    // 切换题目
    toggleTopic (index) {
      this.showTopicData = this.topicData[index - 1]
      // 赋值当前是第几题
      this.currentIndex = parseInt(index)
    },
    // 点击按钮切换题目
    jumpPage (state) {
      this.currentIndex += state
    },
    async confirm () {
      // 单选、多选、判断：{subject_id：题目id;subject_type:题目类型;right_answer:正确答案;stu_answer:学生作答;subject_item_id:学生选择的答案对应的id;right_flag:对1错0;score:对应的分数;sort_index：题目对应的排序号}
      // 填空、翻译：{subject_id：题目id;subject_type:题目类型;right_answer:正确答案;stu_answer:学生作答;subject_item_id:学生答对对应的item_id，错为0;right_flag:对1错0;score:对应的分数;sort_index：题目对应的排序号}
      // 文字排序题：{subject_id：题目id;subject_type:题目类型;right_answer:题干;stu_answer:学生作答;subject_item_id:0;right_flag:对1错0;score:对应的分数;sort_index：题目对应的排序号}
      // 口语题：{subject_id：题目id;subject_type:题目类型;score:分数;stu_answer:最后一次录音的mp3文件上传地址;sort_index：题目对应的排序号}
      let score = 0
      const noArr = this.resultArr.filter(item => {
        score += item.score
        return !item.stu_answer
      })
      score = Math.round(score / this.resultArr.length)
      if (noArr.length === 0) {
        let res
        if (this.type === 1) {
          res = await submitTest({
            id: this.questionsInfo.testBatchId,
            resultJson: JSON.stringify(this.resultArr),
            score
          })
        } else if (this.type === 2) {
          res = await taskSubmit({
            id: this.questionsInfo.id,
            resultJson: JSON.stringify(this.resultArr),
            score,
            submitType: '2',
            taskType: this.questionsInfo.taskType,
            stuAnswerId: this.questionsInfo.stuAnswerId
          })
        }
        if (res.code === '200') {
          this.$emit('getReport', this.questionsInfo.testBatchId)
        } else {
          this.$message.error(res.message)
        }
      } else {
        this.$message.error('请完成所有题目再提交')
      }
    },
    // 答题卡的active
    cardActive (item) {
      if (item.subject_type === '13') {
        let alength = item.stu_answer.length
        for (let i = 0; i < item.stu_answer.length; i++) {
          if (item.stu_answer[i]) {
            alength--
          }
        }
        return alength === 0 ? 'active' : ''
      } else {
        return item.stu_answer ? 'active' : ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .video-js .vjs-big-play-button {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
// 答题卡按钮
.questionBtn {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  padding-top: 10px;
}
.activeBtn {
  color: #009cf6;
  border: 1px solid #009cf6;
  background-color: #fff;
}
// 右侧题目选择
.question-top {
  height: 50px;
  border-bottom: 1px solid #e5e5e5;
  // padding: 0 22px;
  width: 80%;
  line-height: 50px;
  .now-index,
  .total {
    color: #f86f33;
  }
  .now-index {
    font-size: 26px;
  }
  .total {
    font-size: 16px;
  }
  .time {
    margin-left: 20px;
  }
}
.a-list {
  .media-box {
    width: 100%;
    display: flex;
    // justify-content: center;
    align-items: center;
    padding: 20px 0;
    .video {
      width: 100%;
      height: 280px;
      outline: none;
    }
  }
  .question-title {
    margin: 40px 0 20px;
    height: 17px;
    font-size: 16px;
    color: #101d37;
  }
  .answer-input {
    width: 300px;
    margin-left: 20px;
  }
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 16px;
  }
  // 右侧的按钮
  .chooseBtn {
    color: #91959a;
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 38px;
    border: 1px solid #91959a;
    display: block;
  }
  // 右侧按钮高亮
  .activeChooseBtn {
    background-color: #009cf6;
    color: #ffffff;
  }
  .question-content {
    margin-left: 10px;
    font-size: 16px;
  }
}
// 底部控制按钮
.controller {
  margin: 100px auto 0;
  display: flex;
  justify-content: space-around;
  width: 60%;
}

.card-box {
  .card-title {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(16, 29, 55, 1);
  }
  .card-desc {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(16, 29, 55, 1);
    line-height: 43px;
  }
  .card-list {
    display: flex;
    flex-wrap: wrap;
    .card-li {
      width: 38px;
      height: 38px;
      text-align: center;
      line-height: 38px;
      border: 1px solid rgba(0, 156, 246, 1);
      border-radius: 50%;
      margin-right: 20px;
      margin-bottom: 20px;
      font-size: 19px;
      color: rgba(0, 156, 246, 1);
      &.active {
        background: rgba(145, 149, 154, 1);
        border-radius: 50%;
        border: none;
        color: #fff;
      }
    }
  }
}
</style>
